<template>
  <div class="container" style="margin-top: 50px; margin-bottom: 50px;">
    <el-card shadow="always" style="min-height: 500px;">
      <el-container>
        <el-aside>
          <MemberMenu/>
        </el-aside>
        <el-main>
          <el-row>
            <el-col :span="24">
              <el-card class="box-card" shadow="hover">
                <div slot="header" class="clearfix">
                  <span style="color: #409EFF;">
                    <i class="el-icon-warning-outline"></i>
                    已保存了{{ passengerList.length }}条乘客信息，还能添加{{ 10 - passengerList.length }}位乘客
                  </span>
                  <el-button class="float-right" type="primary" @click="handlerDialog" size="small">新增</el-button>
                </div>
                <el-table
                    v-if="passengerList.length > 0"
                    :data="passengerList">
                  <el-table-column
                      align="center"
                      prop="name"
                      label="姓名"
                      width="100">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      label="乘客类型"
                      width="80">
                    <template slot-scope="scope">
                      {{passengerTypeFormatter(scope.row.ptype)}}
                    </template>
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="telephoneNumber"
                      label="电话号码"
                      width="110">
                  </el-table-column>
                  <el-table-column
                      align="center"
                      prop="idNumber"
                      label="证件号码">
                    <template v-slot="scope">
                      {{ idNumberFormatter(scope.row.idNumber) }}
                    </template>
                  </el-table-column>
                  <el-table-column
                      align="center"
                      label="操作"
                      width="100">
                    <template slot-scope="scope">
                      <el-button type="danger" size="small" @click="deletePassenger(scope.row)">删除</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column
                      align="center"
                      label=""
                      width="100">
                    <template slot-scope="scope">
                      <el-link class="text-info" style="cursor: pointer" @click="setDefaultPassenger(scope.row)"
                              v-if="scope.row.pdefault==0">设为默认
                      </el-link>
                      <el-button size="small" type="danger" plain disabled v-else>默认乘客</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <el-empty :image-size="200" v-else></el-empty>
              </el-card>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-card>

    <!-- 添加乘客信息弹框 -->
    <el-dialog title="乘客信息" :visible.sync="dialogFormVisible" :width="'30%'">
      <el-row style="padding: 50px;">
        <el-col :span="24">
          <el-form
              ref="passengersForm"
              :model="passengersForm"
              :rules="passengersRules"
              label-width="100px">
            <el-form-item prop="name" label="姓名">
              <el-input
                  v-model="passengersForm.name"
                  clearable
                  type="text"
                  placeholder="姓名">
              </el-input>
            </el-form-item>
            <el-form-item prop="gender" label="性别">
              <el-radio-group v-model="passengersForm.gender">
                <el-radio :label="item.value" v-for="item in dict.type.sys_user_sex"
                          :key="item.value">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="ptype" label="乘客类型">
              <el-radio-group v-model="passengersForm.ptype">
                <el-radio :label="item.value" v-for="item in dict.type.passenger_type"
                          :key="item.value">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item prop="birthday" label="出生日期" class="data-box">
              <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="passengersForm.birthday"
                  clearable
                  type="date"
                  placeholder="出生日期" style="width: 100%;">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="telephoneNumber" label="手机号">
              <el-input
                  v-model="passengersForm.telephoneNumber"
                  clearable
                  type="text"
                  placeholder="手机号">
              </el-input>
            </el-form-item>
            <el-form-item prop="idType" label="证件类型">
              <el-select style="width: 100%;" v-model="passengersForm.idType" placeholder="请选择">
                <el-option
                    v-for="item in dict.type.id_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="idNumber" label="证件号码">
              <el-input
                  v-model="passengersForm.idNumber"
                  clearable
                  type="text"
                  placeholder="身份证号">
              </el-input>
            </el-form-item>
            <el-form-item prop="dueDate" label="证件有限期" class="data-box">
              <el-date-picker
                  value-format="yyyy-MM-dd"
                  v-model="passengersForm.dueDate"
                  clearable
                  type="date"
                  placeholder="证件有限期" style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addPassenger('passengersForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getPassengerList, addPassenger, deletePassenger, setDefaultPassenger} from "@/api/member/member";
import MemberMenu from "@/views/components/MemberMenu";

export default {
  name: 'memberPassengers',
  components: {MemberMenu},
  dicts: ['sys_user_sex', 'passenger_type', 'id_type'],
  data() {
    return {
      passengerList: [],
      loading: false,
      dialogFormVisible: false,
      passengersForm: {
        idType: "A",
        name: "",
        gender: "",
        ptype: "",
        birthday: "",
        telephoneNumber: "",
        idNumber: "",
        dueDate: "",
        pdefault: 0,
        nationality: "中国",
      },
      passengersRules: {
        name: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入姓名",
          },
        ],
        gender: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请选择性别",
          },
        ],
        ptype: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请选择乘客类型",
          },
        ],
        birthday: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请选择出生日期",
          },
        ],
        telephoneNumber: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入手机号",
          },
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: "请输入正确的号码格式",
            trigger: ["blur", "change"],
          },
        ],
        idNumber: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入身份证号",
          },
          {
            pattern:
                /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i,
            message: "请输入正确的身份证号码格式",
            trigger: ["blur", "change"],
          },
        ],
        dueDate: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请选择证件有限期",
          },
        ],
      }
    }
  },
  computed: {},
  mounted() {
    this.getPassengerList()
  },
  methods: {
    // 性别格式化器
    genderFormatter(val) {
      return this.selectDictLabel(this.dict.type.sys_user_sex, val)
    },
    // 证件类型格式化器
    idTypeFormatter(val) {
      return this.selectDictLabel(this.dict.type.id_type, val)
    },
    // 乘客类型格式化器
    passengerTypeFormatter(val) {
      return this.selectDictLabel(this.dict.type.passenger_type, val)
    },
    idNumberFormatter(val) {
      return val.substring(0, 3) + '***********' + val.substring(14)
    },
    // 获取乘客列表
    getPassengerList() {
      getPassengerList().then((res) => {
        this.passengerList = res.data;
      })
    },
    // 新增乘客信息
    addPassenger(formName) {
      if (this.passengerList.length >= 10) {
        this.$message({
          message: "乘客信息已达上限",
          type: 'warning'
        })
      } else {
        this.$refs[formName].validate((vaild) => {
          if (vaild) {
            this.loading = true,
                addPassenger(this.passengersForm).then((res) => {
                  this.$message({
                    message: res.msg,
                    type: 'warning'
                  }),
                  this.getPassengerList()
                  this.dialogFormVisible = false
                }).finally(() => {
                  this.loading = false
                });
          }
        })
      }
    },
    deletePassenger(row) {
      const dataId = row.dataId;
      const name = row.name;
      this.$confirm('是否确认删除乘客"' + name + '"').then(function () {
        return deletePassenger(dataId);
      }).then(() => {
        this.getPassengerList();
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      })
    },
    setDefaultPassenger(row) {
        setDefaultPassenger(row).then(()=>{
          const name = row.name;
          this.$message({
            type: 'success',
            message: '默认乘客已更换为：'+ name
          });
          this.getPassengerList()
        })
    },
    handlerDialog() {
      this.reset()
      this.dialogFormVisible = true
    },
    // 表单重置
    reset() {
      this.passengersForm = {
        idType: "A",
        name: null,
        gender: null,
        ptype: null,
        birthday: null,
        telephoneNumber: null,
        idNumber: null,
        dueDate: null,
        pdefault: 0,
        nationality: "CHN",
      }
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
